<template>
  <div>
    <div class="question-content">
      <div class="left">
        <div class="car-model-list">
          <div v-for="(group, index) in cardlist" :key="index"
            :class="['car-model-item', { active: activeCarId === group.carId }]" @click="tabHandle(group)">
            <div class="name">
              <img src="@/assets/img/question.png" class="material-icon" />
              <span>{{ group.carName }}</span>
            </div>
            <div class="count">{{ group.questionCount }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="header">
          <h3>{{ activeCarName }}题库</h3>
          <p v-if="staticsQuestionDataInfo">{{ staticsQuestionDataInfo }}</p>
        </div>

        <el-form :model="searchForm" ref="searchFormRef" label-width="auto">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="题目名称：" prop="name">
                <el-input v-model="searchForm.questionName" @blur="search" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目类型：" prop="cont_type">
                <el-select v-model="searchForm.cont_type" clearable placeholder="请选择" @change="search">
                  <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="databox">
                <label class="el-form-item__label">最后操作时间：</label>
                <el-date-picker label="最后操作时间：" v-model="datavalue1" type="datetimerange" start-placeholder="开始日期"
                  end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                  time-format="A hh:mm:ss" @change="creatTime" />
              </div>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="12">
          <el-col :xs="24" :sm="12" :lg="20">
            <el-button type="primary" v-if="categoryId != '0'" @click="showDialog('add')">新增题目</el-button>
            <el-button type="danger" :disabled="!selectIds.length" @click="batchDel">批量删除</el-button>
            <el-button v-ripple type="primary" @click="syncDialogVisible = true" :loading="syncLoading">
              <el-icon>
                <Refresh />
              </el-icon>
              同步官方题库
            </el-button>
          </el-col>
        </el-row>
        <art-table :data="tableData" selection :currentPage="pageNum" :pageSize="pageSize" :total="pagetotal"
          @current-change="currentchange" @size-change="sizechange" @selection-change="handleSelectionChange">
          <template #default>
            <el-table-column label="ID" #default="scope" width="100">
              {{ scope.row.questionId != 0 ? scope.row.questionId : scope.row.id }}
            </el-table-column>
            <el-table-column label="题目" prop="bankcont_title" width="700">
              <template #default="scope">
                <div class="cell_padding">
                  <div class="bankcont_title">
                    <div class="bankcont_title_text">{{ scope.row.questionName }}</div>
                    <img src="https://image.lutongjiakao.com/system/e40351a830694bf4b72816bd7b601807.png" alt=""
                      class="img_icon" v-if="scope.row.questionAnalysis">
                    <img src="https://image.lutongjiakao.com/system/64988bcaaa9241d69d1898c481b09331.png" alt=""
                      class="img_icon" v-if="scope.row.fastStudy">
                    <img src="https://image.lutongjiakao.com/system/439a87a56fc24d909602740fa95e710e.png" alt=""
                      class="img_icon" v-if="scope.row.videoUrl">
                    <div style="clear: both"></div>
                  </div>
                  <div class="cartcont">
                    <div class="cartcont_bigbtn">
                      <el-button class="cartcont_btn" v-for="carModelList in scope.row.carModelList" :key="carModelList"
                        round size="small">
                        {{ carModelList.carName }} ({{ carModelList.carTypes }})
                      </el-button>
                    </div>
                    <div v-for="groupList_one in scope.row.questionGroupList" :key="groupList_one"
                      style="display: flex; margin-right: 12px">
                      <el-button class="cartcont_btn" v-for="groupList in groupList_one.children" :key="groupList" round
                        size="small">
                        {{ groupList_one.name }} / {{ groupList.name }}
                      </el-button>
                    </div>
                  </div>
                  <div style="clear: both"></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="图片" #default="scope" width="400">
              <div v-if="scope.row.questionImg">
                <el-image :src="scope.row.questionImg" preview-teleported :preview-src-list="[scope.row.questionImg]"
                  hide-on-click-modal class="tableimg"></el-image>
              </div>
            </el-table-column>
            <el-table-column label="题型" #default="scope">
              <div class="button_bigbox">
                <el-button v-if="scope.row.questionType == '1'" class="tag-item"
                  style="float: left; margin-right: 0.5rem" round size="small" plain>单选题
                </el-button>
                <el-button v-if="scope.row.questionType == '0'" class="tag-item"
                  style="float: left; margin-right: 0.5rem" round size="small" type="warning" plain>多选题
                </el-button>
                <el-button v-if="scope.row.questionType == '2'" class="tag-item"
                  style="float: left; margin-right: 0.5rem" round size="small" type="danger" plain>判断题
                </el-button>
              </div>
            </el-table-column>
            <el-table-column label="来源" prop="questionId">
              <template #default="scope">
                <span v-if="scope.row.questionId != 0">官方题库</span>
                <span v-else>自建题库</span>
              </template>
            </el-table-column>
            <el-table-column label="最后操作时间" prop="updateTime" width="300">
              <template #default="scope">
                {{ formatDate(scope.row.updateTime) }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-tooltip class="box-item" effect="dark" content="编辑" placement="top-start">
                  <button-table type="edit" @click="buttonMoreClick(scope.row)" />
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="删除" placement="top-start">
                  <button-table type="delete" @click="deleteRole(scope.row.id)" />
                </el-tooltip>
              </template>
            </el-table-column>
          </template>
        </art-table>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增题目' : '编辑题目'" width="30%"
      style="height: 950px; overflow: hidden; overflow-y: auto" :close-on-click-modal="false">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="0"> </el-tab-pane>
        <el-tab-pane label="题目解析" name="1"> </el-tab-pane>
      </el-tabs>
      <el-form ref="formRef" :model="form" label-width="120px" style="padding-right: 100px">
        <el-form-item label="排序" prop="sort" v-if="activeName === '0'">
          <el-input v-model="form.sort" :rows="3" :disabled="form.questionId != 0" />
        </el-form-item>
        <el-form-item label="题目类型" v-if="activeName === '0'">
          <el-radio-group :model-value="dialogType === 'add' ? categoryId : form.categoryId" :disabled="true">
            <el-radio value="1">科目一</el-radio>
            <el-radio value="4">科目四</el-radio>
            <el-radio value="5">注销恢复</el-radio>
            <el-radio value="6">满分学习</el-radio>
            <el-radio value="7">三力测试</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="车型" prop="card_type" v-if="activeName === '0'">
          <el-checkbox-group v-model="cardvaluelist" @change="handleCheckedCitiesChange"
            :disabled="form.questionId != 0">
            <el-checkbox v-for="city in carList" :value="city.value" :key="city.value">
              {{ city.label }}({{ city.tag }})
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="题目名称" prop="name" v-if="activeName === '0'">
          <el-input type="textarea" :rows="4" v-model="form.questionName" :disabled="form.questionId != 0" />
        </el-form-item>
        <el-form-item label="题目类型" prop="cont_type" v-if="activeName === '0'">
          <el-radio-group v-model="radio" :disabled="form.questionId != 0">
            <el-radio value="2">判断题</el-radio>
            <el-radio value="1">单选题</el-radio>
            <el-radio value="0" v-if="categoryId !== '1'">多选题</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="contlist_list" v-if="radio != '2' && activeName === '0'">
          <el-form-item label="选项A："><el-input class="contliststyle" v-model="form.questionA"
              :disabled="form.questionId != 0" /></el-form-item>
          <el-form-item label="选项B："><el-input class="contliststyle" v-model="form.questionB"
              :disabled="form.questionId != 0" /></el-form-item>
          <el-form-item label="选项C："><el-input class="contliststyle" v-model="form.questionC"
              :disabled="form.questionId != 0" /></el-form-item>
          <el-form-item label="选项D："><el-input class="contliststyle" v-model="form.questionD"
              :disabled="form.questionId != 0" /></el-form-item>
        </div>
        <!-- 单选题 -->
        <!-- 判断题 -->
        <div class="contlist_list" v-if="radio == '2' && activeName === '0'">
          <el-form-item label="选项A："><el-input class="contliststyle" v-model="form.questionA"
              :disabled="form.questionId != 0" /></el-form-item>
          <el-form-item label="选项B："><el-input class="contliststyle" v-model="form.questionB"
              :disabled="form.questionId != 0" /></el-form-item>
        </div>
        <!-- end判断题 -->
        <el-form-item label="正确答案" prop="answer" v-if="radio == '2' && activeName === '0'">
          <el-radio-group v-model="form.answer" :disabled="form.questionId != 0">
            <el-radio value="A">A</el-radio>
            <el-radio value="B">B</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="正确答案" prop="answer" v-if="radio == '1' && activeName === '0'">
          <el-radio-group v-model="form.answer" :disabled="form.questionId != 0">
            <el-radio value="A">A</el-radio>
            <el-radio value="B">B</el-radio>
            <el-radio value="C">C</el-radio>
            <el-radio value="D">D</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="正确答案" prop="answer" v-if="radio == '0' && activeName === '0'">
          <el-checkbox-group v-model="checkboxAnswer" :disabled="form.questionId != 0">
            <el-checkbox value="A">A</el-checkbox>
            <el-checkbox value="B">B</el-checkbox>
            <el-checkbox value="C">C</el-checkbox>
            <el-checkbox value="D">D</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="图片" prop="name" v-if="activeName === '0'">
          <div :disabled="form.questionId != 0" class="avatar-uploader" style="
              border: 1px dashed var(--el-border-color-darker);
              border-radius: 6px;
              overflow: hidden;
            " @click="showImageChooseDialog = true">
            <el-image v-if="storeLogo" :src="storeLogo" class="avatar" fit="contain"
              :disabled="form.questionId != 0"></el-image>
            <div v-if="storeLogo" class="mask">替换</div>
            <el-icon v-if="storeLogo" class="del-image" :size="20" @click.stop="handleDelImg">
              <CircleCloseFilled />
            </el-icon>
            <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
                <Plus />
              </el-icon></i>
          </div>
        </el-form-item>
        <el-form-item label="题目解析" prop="analysis" v-if="activeName === '1'">
          <el-input type="textarea" :rows="6" v-model="form.questionAnalysis" :disabled="form.questionId != 0" />
        </el-form-item>
        <el-form-item label="速学速记" prop="fastStudy" v-if="activeName === '1'">
          <el-input type="textarea" :rows="6" v-model="form.fastStudy" />
        </el-form-item>
        <el-form-item label="视频讲解" prop="video" v-if="activeName === '1'">
          <el-input v-model="videoUrl_add">
            <template #append>
              <div class="video-uploader" @click="showVideoChooseDialog = true">
                <el-button style="color: #2b8dfa" type="primary">选择视频</el-button>
              </div>
            </template>
          </el-input>
          <!-- 上传视频部分 -->
          <div style="clear: both"></div>
          <video v-if="videoUrl_add" :src="videoUrl_add" controls class="video-preview"></video>
          <!-- 上传视频部分 -->
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit(formRef)">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="syncDialogVisible" title="同步类型" width="500" body-class="sync-body">
      <el-alert title="首次同步请选择“同步题库全部信息”" type="primary" style="margin-bottom: 20px;" />
      <el-form>
        <el-form-item label="类型：">
          <el-select v-model="syncType" placeholder="请选择同步类型" style="width:250px;">
            <el-option label="同步题库全部信息" value="03" />
            <el-option label="仅同步题库基础信息" value="01" />
            <el-option label="仅同步题库速学速记" value="02" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="syncDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="performSync(1)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <image-selected-dialog v-if="showImageChooseDialog" :single-type="selectImageSingle"
      :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"
      :operationType="false"></image-selected-dialog>
    <video-group-dialog v-if="showVideoChooseDialog" :show-video-choose-dialog="showVideoChooseDialog"
      :single-type="singleType" :operation-type="false" @close-dialog="handleCloseVideoDialog" />
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, UploadProps } from 'element-plus'
import type { FormInstance } from 'element-plus'
import {
  getupdateList,
  addupdateList,
  getcarmodellist,
  getdsquestiongroup,
  getquestioncategory,
  delquestionlist,
  putquestioncategory,
  getStatDataToType,
  asyncQuestion
} from '@/api/questionbank'
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'
import VideoGroupDialog from '@/views/decoration/diyComponents/VideoGroupDialog.vue'

const pagetotal = ref()
const pageNum = ref(1)
const pageSize = ref(10)
const datavalue1 = ref('')
// 使用类型化的ref
const tableData = ref([])
const cardlist = ref([{ carName: '', questionCount: '', carId: '' }])
const carList = ref([{ label: '', tag: '', value: '' }])
const cardvaluelist = ref() //车型value值
const questionoption = ref()
const activeCarId = ref('0')
const activeCarName = ref('全部')
const syncDialogVisible = ref(false)
const syncType = ref('')

const props = defineProps({
  categoryId: {
    type: String
  },
  carStatc: {
    type: Object
  }
})

const emit = defineEmits(['refreshStatc'])

watch(
  () => props.carStatc,
  (newVal) => {
    cardlist.value = newVal?.carStatDataList
  },
  { immediate: true, deep: true }
)

const activeName = ref<string>('0')
const handleClick = (e: any) => { }

const tabHandle = (e: any) => {
  searchForm.carIds = e.carId != 0 ? e.carId : ''
  activeCarId.value = e.carId
  activeCarName.value = e.carName
  getquestionbankllist()
  getStatDataToTypeData()
}

const dialogVisible = ref(false)
const staticsQuestionDataInfo = ref('')

const formRef = ref<FormInstance>()
const checkboxAnswer = ref([])

const form = reactive({
  id: '',
  cont_type: '',
  questionName: '',
  des: '',
  sort: '1  ',
  questionA: '',
  questionB: '',
  questionC: '',
  questionD: '',
  answer: '',
  questionAnalysis: '',
  fastStudy: '',
  categoryId: '',
  questionId: 0
})

const dialogType = ref('add')

const showDialog = (type: string, row?: any) => {
  dialogVisible.value = true
  dialogType.value = type

  if (type === 'edit' && row) {
    const newlistarrayone: string[] = []
    const newlistarraythree: string[] = []
    for (const i in row.questionGroupList) {
      for (const j in row.questionGroupList[i].children) {
        newlistarrayone.push(row.questionGroupList[i].children[j].id)
        newlistarraythree.push(row.questionGroupList[i].id)
        // newgroupids_two.push(newquestionGroupList[j].push(row.questionGroupList[i].children[j].id))
      }
    }
    const newgroupids_two = newlistarraythree.map((item, index) => [item, newlistarrayone[index]])
    console.log(newgroupids_two, '++??cy')

    cascadervalue.value = newgroupids_two
    form.id = row.id
    form.questionName = row.questionName
    cardvaluelist.value = row.carIds.split(',')
    questionoption.value = row.categoryId.split(',')
    form.des = row.des
    form.sort = row.sort
    form.questionA = row.questionA
    form.questionB = row.questionB
    form.questionC = row.questionC
    form.questionD = row.questionD
    form.answer = row.answer
    form.questionAnalysis = row.questionAnalysis
    form.fastStudy = row.fastStudy
    storeLogo.value = row.questionImg
    radio.value = row.questionType.toString()
    videoUrl_add.value = row.videoUrl
    form.categoryId = row.categoryId
    form.questionId = row.questionId

    // 多选题回显
    if (row.questionType == 0) {
      checkboxAnswer.value = row.answer.split('')
    } else {
      checkboxAnswer.value = []
    }
  } else {
    form.id = ''
    form.questionName = ''
    form.cont_type = ''
    form.des = ''
    form.sort = '1'
    form.questionA = ''
    form.questionB = ''
    form.questionC = ''
    form.questionD = ''
    form.answer = ''
    form.questionAnalysis = ''
    form.fastStudy = ''
    videoUrl_add.value = ''
    cardvaluelist.value = []
    questionoption.value = []
    radio.value = '2'
    storeLogo.value = ''
    cascadervalue.value = ''
    checkboxAnswer.value = []
    form.questionId = 0
  }
}

const buttonMoreClick = (row: any) => {
  showDialog('edit', row)
}

const searchFormRef = ref<FormInstance>()

const searchForm = reactive({
  questionName: '',
  carIds: '',
  cont_type: '',
  startTime: '',
  endTime: ''
})

const deleteRole = async (id: string) => {
  ElMessageBox.confirm('确定删除该题库吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    //执行删除接口
    delquestioninfo(id)
  })
}
const delquestioninfo = async (id: string) => {
  const res = await delquestionlist.delquestionlistId(id)
  console.log(res)
  if (res.code == 0) {
    //更细完成后执行
    ElMessage.success('删除成功')
    emit('refreshStatc')
    getquestionbankllist()
  }
}

const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  dialogVisible.value = false
  if (dialogType.value === 'add') {
    //执行新增题库接口
    addupdateinfo()
  } else {
    //执行修改接口
    putupdateinfo(form.id)
  }
}
//新增题库接口
const addupdateinfo = async () => {
  //新增用户接口
  let obj = {
    questionName: form.questionName,
    carIds: cardvalueliststring.value,
    sort: form.sort,
    questionImg: storeLogo.value,
    questionType: radio.value,
    questionA: form.questionA,
    questionB: form.questionB,
    questionC: form.questionC,
    questionD: form.questionD,
    answer: form.answer,
    questionAnalysis: form.questionAnalysis,
    fastStudy: form.fastStudy,
    videoUrl: videoUrl_add.value,
    categoryId: props.categoryId,
    // categoryId: questionoption.value.join(','),
    groupIds: cascaderstring.value
  }
  if (radio.value == '2') {
    obj.questionC = ''
    obj.questionD = ''
  }
  const res = await addupdateList.addupdateId(obj)
  console.log(res)
  if (res.code == 0) {
    //更细完成后执行
    ElMessage.success('新增成功')
    getquestionbankllist()
    emit('refreshStatc')
  }
}
//修改题库接口
const putupdateinfo = async (id: string) => {
  let obj = {
    questionName: form.questionName,
    carIds: cardvalueliststring.value,
    sort: form.sort,
    questionImg: storeLogo.value,
    questionType: radio.value,
    questionA: form.questionA,
    questionB: form.questionB,
    questionC: form.questionC,
    questionD: form.questionD,
    answer: form.answer,
    questionAnalysis: form.questionAnalysis,
    fastStudy: form.fastStudy,
    videoUrl: videoUrl_add.value,
    categoryId: form.categoryId,
    // categoryId: questionoption.value.join(','),
    groupIds: cascaderstring.value
  }
  if (radio.value == '2') {
    obj.questionC = ''
    obj.questionD = ''
  }
  const res = await putquestioncategory.putquestioncategoryId(id, obj)
  console.log(res)
  if (res.code == 0) {
    //更细完成后执行
    ElMessage.success('更新成功')
    getquestionbankllist()
  }
}

const formatDate = (date: string) => {
  return new Date(date)
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
    .replace(/\//g, '-')
}

//搜索刷新等
const search = async () => {
  console.log(searchForm)
  let obj = {
    pageNum: 1,
    pageSize: 10,
    questionName: searchForm.questionName,
    carId: searchForm.carIds,
    questionType: searchForm.cont_type,
    startCreateTime: searchForm.startTime,
    endCreateTime: searchForm.endTime,
    categoryId: props.categoryId,
    type: 0
  }
  if (props.categoryId === '0') {
    obj.categoryId = ''
  }
  const res = await getupdateList.getupdateId(obj)
  if (res.code == 0) {
    tableData.value = res.data.list
    pagetotal.value = res.data.total
  }
}

const creatTime = (e: any) => {
  if (e) {
    searchForm.startTime = formatDate(e[0])
    searchForm.endTime = formatDate(e[1])
  } else {
    searchForm.startTime = ''
    searchForm.endTime = ''
  }
  search()
}

//弹出层所需的参数和事件
const radio = ref('2')
const types_one = ref([])

//展示不同的题目类型
const typeOptions = [
  {
    value: '2',
    label: '判断题'
  },
  {
    value: '1',
    label: '单选题'
  },
  {
    value: '0',
    label: '多选题'
  }
]

const getquestionbankllist = async () => {
  const obj = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    categoryId: props.categoryId !== '0' ? props.categoryId : '',
    carId: searchForm.carIds,
    type: 0
    // type:1
  }
  const res = await getupdateList.getupdateId(obj)
  if (res.code == 0) {
    tableData.value = res.data.list
    pagetotal.value = res.data.total
  }
}
//车型下拉接口
const getcarmodellistinfo = async () => {
  let obj = {}
  const res = await getcarmodellist.getcarmodelId(obj)
  if (res.code == 0) {
    carList.value = res.data
  }
}
//请求下拉科目接口
const questionlist = ref()
const getquestioncategoryinfo = async () => {
  let obj = {}
  const res = await getquestioncategory.getquestioncategoryId(obj)
  if (res.code == 0) {
    questionlist.value = res.data
  }
}
//分页数据处理
const currentchange = (val: number) => {
  pageNum.value = val
  getquestionbankllist() //请求用户列表接口
}
const sizechange = (val: number) => {
  pageSize.value = val
  pageNum.value = 1
  getquestionbankllist() //请求用户列表接口
}
//获得选中的车型label
const cardvalueliststring = ref()
const handleCheckedCitiesChange = (val: any) => {
  console.log(val) //请求用户列表接口
  cardvalueliststring.value = val.toString()
}
// const questionoption = ref()
// const handleCheckedSubjectChange = (val: any) => {
//   console.log(val) //请求用户列表接口
//   questionoption.value = val.toString()
//   console.log(questionoption.value, "questionoption.value===");

// }

//获取分组树形结构
const getgroupllistinfo = async () => {
  let obj = {}
  const res = await getdsquestiongroup.getdsquestiongroupId(obj)
  if (res.code == 0) {
    console.log(res)
    types_one.value = res.data
  }
}
//获取树形结构的选中值
const cascaderstring = ref()
const cascadervalue = ref()

const storeLogo = ref('')
const videoUrl_add = ref('')

const selectIds = ref<string[]>([])

function handleSelectionChange(data: any[]) {
  selectIds.value = data.map((item) => item.id)
}

function batchDel() {
  ElMessageBox.confirm('确定批量删除吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    let ids = selectIds.value.join(',')
    delImg(ids)
  })
}

async function delImg(id: string) {
  const res = await delquestionlist.delquestionlistId(id)
  if (res.code === '00000') {
    emit('refreshStatc')
    await getquestionbankllist()
    ElMessage.success('删除成功')
  }
}

async function getStatDataToTypeData() {
  const res = await getStatDataToType({
    carIds: searchForm.carIds,
    categoryIds: props.categoryId
  })
  if (res.code === '00000') {
    let data = res.data.filter((item: any) => ![3, 4].includes(item.questionType))
    let result = data.map((item: any) => {
      return `${item.questionTypeName} : ${item.typeCount}`
    })
    staticsQuestionDataInfo.value = result.join(' ; ')
  }
}

const showImageChooseDialog = ref(false)
const selectImageSingle = ref(true)
const singleType = ref(true)
const showVideoChooseDialog = ref(false)
const handleCloseImageDialog = (value: any) => {
  if (value && value.fileUrl) {
    storeLogo.value = value.fileUrl
  }
  showImageChooseDialog.value = false
}
const handleCloseVideoDialog = (value: any) => {
  if (value && value.fileUrl) { videoUrl_add.value = value.fileUrl }
  showVideoChooseDialog.value = false
}

const handleDelImg = () => {
  storeLogo.value = ''
}

const syncLoading = ref(false)
const performSync = async (type: number) => {
  try {
    syncLoading.value = true
    const res = await asyncQuestion({ state: type, type: syncType.value })

    if (res && res.code === '00000') {
      ElMessage.success(res.msg || '同步成功')
      syncDialogVisible.value = false
    } else {
      ElMessage.error(res?.msg || '同步失败')
    }
  } catch (error) {
    console.error('同步请求失败:', error)
    ElMessage.error('同步失败，请稍后重试')
  } finally {
    syncLoading.value = false
  }
}

onMounted(() => {
  getquestionbankllist()
  getcarmodellistinfo()
  getgroupllistinfo()
  getquestioncategoryinfo()
  cardlist.value = props.carStatc?.carStatDataList
  getStatDataToTypeData()
})
</script>

<style lang="scss" scoped>
.label {
  float: left;
  margin: 0.5rem 0 0.5rem 1.5rem;
  display: inline;
}

.labellist .label:nth-child(1) {
  margin-left: 0;
}

.bankcont_title {
  display: flex;
  // align-items: center;
}

.bankcont_title_text {
  float: left;
  // margin-right: 1rem;
  font-weight: bold;
}

.label_sonli {
  color: #5d87ff;
}

.tag-item {
  margin-left: 5px;
}

.tagcontsize {
  color: #999;
}

.tagcontbigsize {
  margin-top: 0.5rem;
}

.tableimg {
  width: 48px;
  height: 48px;
}

.title_box_left {
  float: left;
  width: 8rem;
  height: 4.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-right: 1rem;
}

.title_box_right {
  float: right;
  float: left;
}

.columnvideo {
  border-radius: 0.5rem;
}

//.tableimg {
//  width: 120px;
//  height: 120px;
//  border-radius: 6px;
//}

::v-deep img {
  max-width: 178px;
  display: inline;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;

  .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-size: 12px;
  }

  .del-image {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #8c939d;
  }

  &:hover .mask {
    opacity: 1;
  }

  &:hover .del-image {
    display: block;
  }
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  max-width: 178px;
}

.video-uploader {
  border-radius: 6px;
  color: #fff;
  display: block;
}

.uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.video-preview {
  margin-top: 10px;
  width: 600px;
  height: 300px;
}

.video-preview-border {
  margin-top: 10px;
  width: 600px;
  height: 300px;
}

.button_bigbox {
  display: flex;
}

.cartcont {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.cartcont_btn {
  float: left;
  margin-top: 10px;
}

.cartcont_bigbtn {
  margin-right: 12px;
}

.cell_padding {
  padding: 12px 0;
}

.question-content {
  display: flex;

  .left {
    width: 300px;
    margin-right: 20px;
    border-right: 1px solid #e4e7ed;

    .car-model-list {
      width: 300px;
    }

    .car-model-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 10px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s;

      .name {
        display: flex;
        align-items: center;

        .material-icon {
          width: 24px;
          height: 24px;
          margin-right: 6px;
        }
      }
    }

    .car-model-item:hover {
      background-color: #eff8ec;
    }

    .car-model-item.active {
      color: var(--el-color-primary);
      background-color: #eff8ec;
      border-right: 2px solid var(--el-color-primary);
    }

    .car-model-item .count {
      color: #999;
      font-size: 13px;
    }
  }

  .right {
    flex: 1;
    height: 100%;
    padding-top: 10px;
    overflow-x: auto;

    .header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      p {
        margin-left: 10px;
        font-size: 12px;
      }
    }
  }
}

:deep(.sync-body) {
  padding: 0 0 25px !important;
}

.img_icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
</style>
